<template>
  <el-drawer title="采购车" :visible.sync="drawer" direction="rtl" :modal="false" custom-class="custom" size="50%">
    <el-table ref="table" :data="cartList.data" style="min-width: 100%" size="small" :height="minHeight">
      <el-table-column label="图片" min-width="60">
        <template slot-scope="scope">
          <div v-if="scope.row.goods_id">
            <el-image v-viewer :src="scope.row.imgurl" />
          </div>
          <div v-else>
            <el-image v-viewer :src="scope.row.imgurl?scope.row.imgurl[0]:''">
              <div slot="error" class="image-slot" />
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="产品名称" min-width="300">
        <template slot-scope="scope">
          <div v-if="scope.row.goods_id">
            {{ scope.row.goods_name }}
          </div>
          <label>{{ scope.row.bom_name }}</label>
        </template>
      </el-table-column>
      <el-table-column label="产品sku编码" min-width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.goods_id">
            {{ scope.row.goods_sku_id }}
          </div>
          <label>{{ scope.row.bom_sku_id }}</label>
        </template>
      </el-table-column>
      <el-table-column label="颜色" min-width="70" prop="color_name" />
      <el-table-column label="规格" min-width="60" prop="spec_value" />
      <el-table-column label="操作" min-width="60">
        <template slot-scope="scope">
          <Delete :key="scope.$index" @confirm="delValue(scope.row.goods_sku_id)">
            <i class="el-icon-delete" />
          </Delete>
        </template>
      </el-table-column>
    </el-table>
    <div ref="paginationCard" class="drawer-btn">
      <Pagination ref="pagination" class="flex-x-start" />
      <div class="dis-flex flex-y-center flex-x-end">
        <div>
          <el-button size="small" @click="canel">取 消</el-button>
          <el-button type="primary" size="small" @click="purchase">去采购</el-button>
        </div>
      </div>
    </div>

  </el-drawer>
</template>
<script>
import Pagination from '@/components/Pagination'
import Delete from '@/components/Delete'
import { PurchaseCart } from '@/api/stock/cart'
import { getMinH } from '@/utils/public'
export default {
  name: 'Cart',
  components: {
    Delete,
    Pagination
  },
  data() {
    return {
      drawer: false,
      cartList: {},
      pagination: {
        page: 1,
        per_page: 30
      },
      minHeight: 400,
      selectId: []
    }
  },
  methods: {
    show(data) {
      this.cartList = data
      this.drawer = true
      this.$nextTick(() => {
        this.minHeight = getMinH(this, 'table', 'paginationCard')
        this.initPagination({
          page: this.cartList.current_page,
          total: this.cartList.total,
          per_page: this.cartList.per_page
        })
      })
    },
    // 分页
    initPagination(data) {
      this.$refs.pagination.init({ ...data, cb: (res) => {
        this.pagination = res
        this.$emit('confirm', this.pagination)
      } })
    },
    canel() {
      this.drawer = false
    },
    purchase() {
      this.$router.push({
        path: '/purchase/purchaseVehicle'
      })
    },
    // 删除
    delValueBatn() {
      if (!this.selectId.length) {
        this.$message.error('请先选择要删除的数据')
        return false
      }

      this.delValue(this.selectId.join(','))
    },
    delValue(sku_ids) {
      PurchaseCart.delPurchaseCart({ sku_ids }).then((res) => {
        this.$message.success('删除成功')
        this.$emit('confirm')
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep :focus {
  outline: 0;
}
::v-deep .el-drawer__header {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 10px;
}
.col-m{
  color: red;
  margin-right: 10px;
  .del-text{
    margin-left: 5px;
  }
}
.drawer-btn{
  padding: 0 24px 10px 24px;
  .flex-x-start{
    justify-content: flex-start;
  }
}
</style>
